<script setup>
import {ref, watch, inject} from "vue";
import {randomString} from "@/utils/RandomUtils.js";
import {addProductCategoryAPI} from "@/api/product.js";
import {elErrorMessageTip, elMessageTip} from "@/utils/MessageTipUtils.js";

const env = import.meta.env
const PRODUCT_CATEGORY_NAME_MAX_LEN = env.VITE_PRODUCT_CATEGORY_NAME_MAX_LEN
const PRODUCT_CATEGORY_CODE_MAX_LEN = env.VITE_PRODUCT_CATEGORY_CODE_MAX_LEN
const PRODUCT_CATEGORY_DESC_MAX_LEN = env.VITE_PRODUCT_CATEGORY_DESC_MAX_LEN

const {addProductCategoryVisible, searchByCondition} = inject('addProductCategory')

// 一级分类
const name = ref('')
const code = ref('')
const disabled = ref(false)
const description = ref('')

// 二级分类个数
const productCategorySubCnt = ref(0)
// 上一次二级分类个数
const productCategorySubCntTemp = ref(0)
// 二级分类
const productCategorySub = ref([])
// 二级分类随机 id 长度
const productCategorySubIdLen = ref(10)
// 二级分类步进器增加与删除
const productCategorySubCntChange = (val) => {
  if (val > productCategorySubCntTemp.value) {
    const cnt = val - productCategorySubCntTemp.value
    for (let i = 0; i < cnt; i++) {
      productCategorySub.value.push({
        id: randomString(productCategorySubIdLen.value),
        name: '',
        code: '',
        disabled: false,
        description: ''
      })
    }
  }
  if (val < productCategorySubCntTemp.value) {
    const cnt = productCategorySubCntTemp.value - val
    for (let i = 0; i < cnt; i++) {
      productCategorySub.value.pop()
    }
  }
  productCategorySubCntTemp.value = val
}
// 二级分类指定项删除
const delProductCategorySubItem = (idx) => {
  productCategorySub.value.splice(idx, 1)
  productCategorySubCnt.value = productCategorySub.value.length
  productCategorySubCntTemp.value = productCategorySub.value.length
}

// 新增商品分类
const addProductCategory = async () => {
  if (name.value.length <= 0 || code.value.length <= 0) {
    elErrorMessageTip("请先完成输入")
    return
  }
  if (productCategorySub.value.length > 0) {
    for (let i = 0; i < productCategorySub.value.length; i++) {
      const sub = productCategorySub.value[i]
      if (sub.name <= 0 || sub.code <= 0) {
        elErrorMessageTip("请先完成输入")
        return
      }
    }
  }
  const res = await ElMessageBox.confirm(
      `是否确认提交商品分类`,
      '新增商品分类',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 添加分类
    return await addProductCategoryAPI(name.value, code.value, disabled.value, description.value, productCategorySub.value)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) {
    // 输入框数据清除
    name.value = ''
    code.value = ''
    disabled.value = false
    description.value = ''
    productCategorySub.value = []
    // 关闭窗口
    addProductCategoryVisible.value = false
    // 重新查询数据
    searchByCondition()
  }
}
</script>

<template>
  <div>
    <el-dialog v-model="addProductCategoryVisible" title="新增商品分类">
      <el-form
          label-position="right"
          label-width="130px"
      >
        <el-form-item label="商品分类名称">
          <el-input
              v-model="name"
              placeholder="请输入商品分类名称"
              clearable
              :maxlength="PRODUCT_CATEGORY_NAME_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类编码">
          <el-input
              v-model="code"
              placeholder="请输入商品分类编码"
              clearable
              :maxlength="PRODUCT_CATEGORY_CODE_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品分类描述">
          <el-input
              autosize
              type="textarea"
              placeholder="请输入商品分类描述"
              clearable
              v-model="description"
              :maxlength="PRODUCT_CATEGORY_DESC_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="添加二级商品分类">
          <div class="w-full flex justify-end items-center">
            <el-input-number :min="0" v-model="productCategorySubCnt" @change="productCategorySubCntChange"/>
          </div>
        </el-form-item>
        <div class="mb-4 flex justify-between items-center" v-for="(item, idx) in productCategorySub" :key="item.id">
          <div class="mr-4 flex-1 flex justify-start items-center">
            <div>
              <el-input
                  class="mr-4"
                  v-model="item.name"
                  placeholder="请输入商品分类名称"
                  clearable
                  :maxlength="PRODUCT_CATEGORY_NAME_MAX_LEN"
                  show-word-limit
              />
              <el-input
                  class="mr-4 mt-1"
                  v-model="item.code"
                  placeholder="请输入商品分类编码"
                  clearable
                  :maxlength="PRODUCT_CATEGORY_CODE_MAX_LEN"
                  show-word-limit
              />
            </div>
            <el-radio-group v-model="item.disabled" class="ml-4">
              <el-radio :label="true">禁用</el-radio>
              <el-radio :label="false">开放</el-radio>
            </el-radio-group>
            <el-input
                class="mr-4"
                v-model="item.description"
                type="textarea"
                :rows="3"
                resize="none"
                placeholder="请输入商品分类描述"
                clearable
                :maxlength="PRODUCT_CATEGORY_DESC_MAX_LEN"
                show-word-limit
            />
          </div>
          <el-button type="danger" plain @click="delProductCategorySubItem(idx)">删除</el-button>
        </div>
      </el-form>
      <div class="flex justify-end items-center">
        <el-button type="primary" @click="addProductCategory">提交商品分类</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>